<template>
  <commonDrawer
   :title="drawerData.type==='edit'?'修改SIP号绑定':'新增SIP号绑定'"
   :drawer="drawer"
   @closeDraw="openOrCloseDrawer"
   @cancelFun="drawer=false"
   @save="save">
      <template slot="column">
          <el-form class="m7-form" :model="drawerData.form" :rules="rules" ref="formRef" label-position="top" size="mini">
              <el-form-item prop="number">
                <span slot="label">
                   SIP号
                   <el-tooltip class="item" effect="dark" content="自定义SIP 规则仅支持 3-6 位纯数字" placement="top">
                      <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                   </el-tooltip>
                </span>
                <el-input size="mini" type="text" v-model.trim="drawerData.form.number" placeholder="请输入3-6位纯数字" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                 <span slot="label">
                   密码
                   <el-tooltip class="item" effect="dark" content="密码仅支持6-18位的数字、大小写字母" placement="top">
                      <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
                   </el-tooltip>
                 </span>
                  <el-input size="mini" type="text" v-model.trim="drawerData.form.password" placeholder="请输入6-18位的数字、大小写字母" auto-complete="off" max="30"></el-input>
              </el-form-item>
              <el-form-item label="是否NAT" prop="isNAT">
                  <el-radio v-model="drawerData.form.isNAT" :label="true">是</el-radio>
                  <el-radio v-model="drawerData.form.isNAT" :label="false">否</el-radio>
              </el-form-item>
              <el-form-item label="语音编码" prop="codingFormat">
                  <m7Select filterable multiple  size="mini" v-model="drawerData.form.codingFormat" placeholder="请选择" :options="SipCode"></m7Select>
              </el-form-item>
              <el-form-item label="应用座席" prop="uid">
                  <m7Select filterable  size="mini" v-model="drawerData.form.uid" placeholder="请选择" :options="agents" :defaultProps="{ label: 'agentName', value: '_id' }"></m7Select>
              </el-form-item>
              <el-form-item label="注册设备" prop="registerDevice" v-if="drawerData.type==='edit'">
                  <el-input size="mini" type="text" v-model.trim="drawerData.form.registerDevice" disabled></el-input>
              </el-form-item>
          </el-form>
      </template>
  </commonDrawer>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { IvrModule } from '@/store/modules/config/ivr'
import { isNumber2, numberAndLetter } from '@/utils/validate'
import commonDrawer from '@/common/views/drawer/index.vue'
import { deepClone } from '@/utils/common'
interface DrawerData {
  type: string
  form: {
    number: string
    password: string
    isNAT: boolean
    codingFormat: []
  }
}
@Component({
  name: 'SipDetial',
  components: { commonDrawer }
})
export default class SipDetial extends Vue {
  @Prop({ default: {} }) private drawerData!: DrawerData
  private drawer: boolean = false // 抽屉控制值
  private $message: any
  private $store: any
  private agents: object[] = [{}] // 应用座席

  private validateNumber = (rule, value, callback) => {
    if (value !== '') {
      if (!isNumber2(value) || value.length < 3 || value.length > 6) {
        callback(new Error('请输入3-6位数字'))
      } else {
        callback()
      }
    } else {
      callback(new Error('必填'))
    }
  }

  private validatePassword = (rule, value, callback) => {
    if (value !== '') {
      if (!numberAndLetter(value) || value.length < 6 || value.length > 18) {
        callback(new Error('密码仅支持6-18位的数字、大小写字母'))
      } else {
        callback()
      }
    } else {
      callback(new Error('必填'))
    }
  }

  private rules: object = {
    number: [{ required: true, validator: this.validateNumber, trigger: 'blur' }],
    password: [{ required: true, validator: this.validatePassword, trigger: 'blur' }],
    isNAT: [{ required: true, message: '必填', trigger: 'blur' }],
    codingFormat: [{ required: true, message: '必填', trigger: 'change' }]
  }

  private SipCode: object[] = [ // 音频编码
    { label: 'G711A', value: 'G711A' },
    { label: 'G711U', value: 'G711U' },
    { label: 'GSM', value: 'GSM' },
    { label: 'G729', value: 'G729' },
    { label: 'ILBC', value: 'ILBC' },
    { label: 'VP8', value: 'VP8' }
  ]

  private openOrCloseDrawer () { // 打开或者是关闭抽屉 || 父组件调用
    this.drawer = !this.drawer
    this.$nextTick(() => {
      (this as any).$refs.formRef.clearValidate()
    })
  }

  private save () { // 保存sip号码
    (this as any).$refs.formRef.validate((valid: boolean) => {
      if (valid) {
        const actionData = this.drawerData.form
        const actionUrl = this.drawerData.type === 'add' ? '/call/action/config/sipNumber/create' : '/call/action/config/sipNumber/update'
        const data = { url: actionUrl, method: 'POST', data: actionData }
        IvrModule.IvrCommonAction(data).then((res: any) => {
          if (res && res.success) {
            this.$emit('refresh', this.drawerData.type === 'add' ? 'addSuccess' : null)
            this.drawer = false
            this.$message({ message: '保存成功', type: 'success' })
          }
        })
      } else {
        return false
      }
    })
  }

  private handleClose () { // 关闭抽屉
    this.drawer = false
  }

  private beforeMount () {
    this.agents = deepClone(this.$store.state.common.publicCache.userList) || []
    this.agents.unshift({ agentName: '请选择', _id: '' })
  }
}
</script>
<style lang="stylus" scoped>
.tip-span
  color $icon-gray
  font-size 12px
  cursor pointer
</style>
